<template>
  <view class="classifys">
    <view v-show="show">
      <view class="title">
        全部分类
        <view @click="show=false" class="title-arrow">
          <wd-icon size="20" name="arrow-down"></wd-icon>
        </view>
      </view>
      <wd-gap height="0.6rem"></wd-gap>
      <view class="steady-grid">
        <view @click="getWapper(item)" class="d-flex-center" v-for="(item,index) in types" :key="index">
          <wd-button :class="{'active': item.value == itemIndex}" custom-class="steady-btn" size="small">
            {{item.label}}
          </wd-button>
        </view>
      </view>
    </view>
    
    <view class="gm-tab" v-show="!show">
      <view @click="getWapper(item)" :class="{'active': item.value == itemIndex}" class="gm-tab_li" v-for="(item,index) in types" :key="index">
        {{item.label}}
      </view>
      <view @click="show=true" class="steady-ps">
        <wd-icon name="arrow-up" size="20"></wd-icon>
      </view>
    </view>
    <view class="water-fall">
      <scroll-view class="scroll-view" scroll-y>
        <Waterfalls ref="fallsRef"  @imageClick="wapperClick" :column="3" :value="falls"></Waterfalls>
      </scroll-view>
    </view>
    <view style="height: 60px"></view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { toRouter } from '@/hooks/utils'
import { onLoad, onPullDownRefresh, onShow, onReachBottom } from "@dcloudio/uni-app";
import Waterfalls from "@/components/custom-waterfalls-flow.vue";
const itemIndex = ref('')
const show = ref(false)
const falls = ref([]), types = ref([]), fallsRef = ref(null)
const page = ref(1), isPullDownRefresh = ref(false);
let url = `/api/wallpaper/oss/page?page=${page.value}&size=20&category=dynamic-wallpaper`
const initList = () => {
  uni.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 6000
  });
  if( itemIndex.value ){
    url = `/api/wallpaper/oss/page?page=${page.value}&size=20&category=dynamic-wallpaper&type=${itemIndex.value}`
  } else {
    url = `/api/wallpaper/oss/page?page=${page.value}&size=20&category=dynamic-wallpaper`
  }
  uni.request({
    url: url
  }).then((res) => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });
    falls.value = falls.value.concat(res.data.data)
    uni.hideToast();
  });
};
const getTypes = () => {
  uni.request({
    url: '/api/wallpaper/static-type/list?page=0&size=100'
  }).then((res) => {
    types.value = res.data.items
  })
}
onMounted(() => {
  initList()
  getTypes()
})
const wapperClick = (item) => {
  toRouter("/pages/preview/index", `name=${item.name}&url=${item.url}&category=${item.category}&association=${item.association}`);
}
const getWapper = (item) => {
  uni.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 1500
  })
  itemIndex.value = item.value
  page.value = 1
  url = `/api/wallpaper/oss/page?page=${page.value}&size=20&type=${itemIndex.value}&category=dynamic-wallpaper`
  uni.request({
    url: url,
    method: 'GET',
    success: (res) => {
      res.data.data.forEach((item) => {
        item.image = item.url;
      });
      falls.value = res.data.data
      fallsRef.value.refresh()
      uni.hideToast()
    }
  })
}
onPullDownRefresh(() => {
  page.value = 1;
  uni.showToast({
    title: '刷新中',
    icon: 'none',
    duration: 1500,
    position: 'top'
  });
  uni.request({
    url: url,
    method: 'GET',
    success: (res) => {
      res.data.data.forEach((item) => {
        item.image = item.url;
      });
      falls.value = res.data.data
      fallsRef.value.refresh()
      uni.hideToast()
    }
  })
})

onReachBottom(() => {
  page.value++;
  isPullDownRefresh.value = false;
  initList();
})
</script>

<style lang="scss" scoped>
.title{
  position: relative;
  font-size: 0.85rem;
  text-align: center;
  .title-arrow{
    position: absolute;
    right: 0;
    top: 0;
  }
}
.gm-tab{
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-gap: 10px;
  height: 23px;
  overflow: hidden;
  .active{
    color: rgba(220, 70, 129, 1) !important;
  }
  .gm-tab_li{
    color: rgba(144, 144, 144, 1);
    font-size: 0.9rem;
  }
  .steady-ps{
    position: absolute;
    top: 0;
    right: 0;
  }
}
.steady-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  --wot-fs-secondary: 0.8rem;
}
.steady-btn{
  width: 80px !important;
  --wot-color-theme: rgb(239, 239, 239);
  --wot-color-white: #777;
  
}
.steady-btn.active{
  --wot-color-theme: rgb(220, 64, 100);
  --wot-color-white: #fff;
}
.pic-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  margin-top: 0.8rem;
}
.water-fall{
  margin-top: 15px;
}
</style>